<template>
  <div id="app">
    <footer>
      <div class="page">
        <router-link to="/"><i class="iconfont icon-iconfontxiaolvdashitubiao30"></i><br>首页</router-link>
      </div>
      <div class="page">
        <router-link to="/fact"><i class="iconfont icon-faxian"></i><br>发现</router-link>
      </div>
      <div class="page">
        <router-link to="/indent"><i class="iconfont icon-icondd1"></i><br>订单</router-link>
      </div>
      <div class="page">
        <router-link to="/person">
        <i class="iconfont icon-ren2"></i><br>
        我的</router-link>
      </div>
    </footer>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      
      }
  },
  methods:{
    
  }
}
</script>

<style>
@import'./font/iconfont.css';
*{
  margin: 0;
  padding: 0;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
footer{
  display: flex;
  height: 3.125rem;
  position: fixed;
  bottom:0; 
  width: 100%;
  background-color: white;
  }
.page{
  flex: 1;
  text-align: center;
  padding-top: 0.5rem;
}
.page a{
  color: #615f5f;
  text-decoration: none;
}
.page a.router-link-exact-active{
  color: blue;
}
.page a.router-link-exact-active i::before{
  color: blue;
}
.iconfont{
  font-size: 1rem;
}
</style>
